<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta charset="utf-8">
    <title>IFE Task 6</title>
    <link rel="stylesheet" href="css/Task6.css">
</head>
<body>
<div class="container">
    <header>
        <div class="url-area">
            <p>ife.baidu.com</p>
        </div>
        <p class="date">2016.03</p>
        <hr>
    </header>

    <!--第一部分内容，包括图片和侧边栏-->
    <section class="section-1">
        <!--主图像-->
        <figure>
            <img src="img/left_top_img.jpg"  width="641px" height="301px">
            <!--左部绿色遮罩-->
            <div class="cover-left"></div>
            <!--右部粉色遮罩-->
            <div class="cover-right"></div>
        </figure>
        <!--侧边栏，关于技术...-->
        <aside>
            <hr>
            <p class= "about">about</p>
            <p class="about" style="margin-top:-10px;">technologe</p>
            <P class="detail">About technologe about technologe<br>about technologe</P>
            <p class="number-1">700</p>
            <p class="number-2">3.2</p>
            <p class="text-1">css</p>
            <p class="text-2">cssssccsccscssc</p>
        </aside>
    </section>

    <!--第二部分的内容，what when how的文本区-->
    <section class="section-2">
        <div class="what">
            <h2>what</h2>
            <p>前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端</p>
        </div>
        <div class="when">
            <h2>when</h2>
            <p>前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端端前端前端前端前端</p>
        </div>
        <div class="how">
            <h2>how</h2>
            <p>前端前端前端前端</p>
            <p>前端前端前端前端前端</p>
            <p>前端前端前端</p>
        </div>
        <div class="percent">
            <p>what-------<span>40%</span></p>
            <p>what-------<span>30%</span></p>
            <p>what-------<span>30%</span></p>
        </div>
    </section>  
    <!--最后的文章区-->
    <section class="section-3">
        <!--文章区左侧-->
        <div class="article-left">
            <div class="heading-left">
                <p class="line-1"><span>THE</span> TECHNOLOGE <br>OF FRONT</p>
                <p class="line-2">前端技术领域</p>
                <hr>
            </div>
            <article>
                <p class="para-1"><span>前</span>端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端<img src="img/2.jpg">前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端端前端前</p>
                <p class="para-2">端前端前端前端前端前端前端前端前端前端前端前端前端前端端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端</p>
                <p class="para-3">前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端端前端前端前前端前端前端前端前端前端前端前端前端端前端前端前前端前端前前端前端前端前端前端前端前端前端前端前端前端前端前端前</p>
            </article>
        </div>
        <div class="article-right">
            <figure>
                <div class="black-mask"></div>
                <figcaption>前端技术<span>前端技术前端技术</span></figcaption>
                <img src="img/3.jpg" width="458px" height="275px">
            </figure>
            <article>
                <p class="first-line"><span class="triangle"></span>前端前端前端前端前端前端....................<span>前端</span></p>
                <p><span class="triangle"></span>前端前端前端前端..........................<span>前端前</span></p>
                <p><span class="triangle"></span>前端前端前端前端前端前端前端...............<span>前端</span></p>
                <div class="heading-right">
                    <p class="number-0">0</p>
                    <div class="mark">
                        <p class="mark-1">ONE TWO <br />THREE FORE FIVE</p>
                        <p class="mark-2">hello world hello world <br>hello world</p>
                    </div>
                </div>
                <div class="icon-1">
                    <img src="img/icon-1.png">
                    <img src="img/icon-1.png">
                </div>
                <p class="quote">world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world</p>
                <div class="icon-2">
                    <img src="img/icon-2.png">
                    <img src="img/icon-2.png">
                </div>
            </article>
        </div>
    </section>
    <footer>
        <hr>
        <p>ife.baidu.com</p>
    </footer>
</div>
</body>
</html>
